<template>
  <Nav :isBlack="true" :isfixed="true"></Nav>
  <div class="swiper">
    <el-carousel trigger="click" height="450px">
      <el-carousel-item v-for="item in 4" :key="item">
        <img @click="swiperClick(item)"
          src="https://wid.s3.cn-north-1.amazonaws.com.cn/uploads/images/2022-09-28/0909-%E4%B8%93%E9%A2%98%E9%A1%B5%401.5x-475630.jpg"
          style="width: 100%" />
      </el-carousel-item>
    </el-carousel>
  </div>

  <div style="margin-top: 30px;font-wight: 700;font-size: 24px;text-align: center;">
    在pytorchView，你可以：
  </div>

  <div class="middle-img">
    <div>
      <img src="@/assets/home_img1.png" alt="" />
    </div>
    <div class="home-img">
      <img src="@/assets/home_img2.png" alt="" />
    </div>
    <div class="home-img">
      <img src="@/assets/home_img3.png" alt="" />
    </div>
    <div class="home-img">
      <img src="@/assets/home_img4.png" alt="" />
    </div>
  </div>
  <hr />
  <div class="hello">你好，coder！</div>
  <div class="cooperation">加入我们,碰撞千万数据科学家！</div>

  <div class="join" @click="to('/register')">立即加入</div>
</template>

<script setup>
import Nav from "@/components/Nav.vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const to = (url) => {
  router.push(url);
};

const swiperClick = (i) => { };
</script>
<style scoped>
.swiper {}

.middle-img {
  display: flex;
  justify-content: space-around;
  height: 400px;
  /* background-color: pink; */
}

.middle-img img {
  margin-top: 30px;
  width: 300px;
}

hr {
  margin-top: 40px;
  width: 90%;
  margin: auto;
  background-color: #f9f9f9;
}

.hello {
  margin-top: 60px;
  font-weight: 500px;
  font-size: 72px;
  text-align: center;
}

.cooperation {
  margin-top: 30px;
  font-weight: 300;
  font-size: 48px;
  text-align: center;
}

.join {
  width: 130px;
  background-color: #2979ff;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  margin: 0 auto;
  margin-top: 60px;
  user-select: none;
}
</style>
